<template>
  <el-container>
    <el-header v-if="btnFlag">
      <el-row :gutter="20" style="margin-top: 30px">
        <el-col :span="4" :offset="1" style=""
          ><el-button v-if="btnFlag" type="primary" plain @click="returnIndex"
            >返回</el-button
          ></el-col
        >
      </el-row>
    </el-header>
    <el-main>
      <div class="contain">
        <div
          id="treeChart"
          style="width: 100%; height: 100%; margin-top: -80px"
        >
          <tree-echart
            ref="tree"
            :chartData="chartData"
            @updateFlag="updateFlag"
            style="width: 90%; margin-left: 30px"
          ></tree-echart>
          <el-dialog
            title="提示"
            width="50%"
            top="100px"
            :visible.sync="flag"
            :before-close="handleClose"
          ></el-dialog>
        </div>
        <table
          class="sub-top-table"
          style="width: 600px; height: 500px"
          v-show="false"
        >
          <tr>
            <th rowspan="4">编制及实有</th>
            <th></th>
            <th colspan="2">行政</th>
            <th colspan="2">单列</th>
            <th colspan="2">工勤</th>
            <th colspan="2">事业</th>
          </tr>
          <tr>
            <th>预设编制</th>
            <td colspan="2">222</td>
            <td colspan="2">12</td>
            <td colspan="2">111</td>
            <td colspan="2">25</td>
          </tr>
          <tr>
            <th>实配编制</th>
            <td colspan="2">28</td>
            <td colspan="2">47</td>
            <td colspan="2">89</td>
            <td colspan="2">63</td>
          </tr>
          <tr>
            <th>超空编制</th>
            <td colspan="2">57</td>
            <td colspan="2">57</td>
            <td colspan="2">57</td>
            <td colspan="2">85</td>
          </tr>

          <tr>
            <th rowspan="5">机构及设置</th>
            <th></th>
            <th>副局</th>
            <th>正处</th>
            <th colspan="2">副处</th>
            <th>正科</th>
            <th>副科</th>
            <th colspan="2">股级</th>
          </tr>
          <tr>
            <th>内设</th>
            <td>44</td>
            <td>63</td>
            <td colspan="2">12</td>
            <td>63</td>
            <td>86</td>
            <td colspan="2">44</td>
          </tr>
          <tr>
            <th>下设</th>
            <td>0</td>
            <td>0</td>
            <td colspan="2">0</td>
            <td>12</td>
            <td>13</td>
            <td colspan="2">12</td>
          </tr>
          <tr>
            <th>派出</th>
            <td>11</td>
            <td>1</td>
            <td colspan="2">23</td>
            <td>34</td>
            <td>11</td>
            <td colspan="2">111</td>
          </tr>
          <tr>
            <th>事业</th>
            <td>11</td>
            <td>1</td>
            <td colspan="2">23</td>
            <td>34</td>
            <td>11</td>
            <td colspan="2">111</td>
          </tr>

          <tr>
            <th rowspan="4">职数及配备</th>
            <th></th>
            <th>部门<br />领导<br />正职</th>
            <th>部门<br />领导<br />副职</th>
            <th colspan="2">与部门领导同<br />级别的其他领<br />导</th>
            <th>内设<br />机构<br />领导<br />正职</th>
            <th>内设<br />机构<br />领导<br />副职</th>
            <th colspan="2">与内设机构领<br />导同级别的其<br />他领导</th>
          </tr>
          <tr>
            <th>应配</th>
            <td>44</td>
            <td>63</td>
            <td colspan="2">12</td>
            <td>63</td>
            <td>86</td>
            <td colspan="2">44</td>
          </tr>
          <tr>
            <th>实配</th>
            <td>0</td>
            <td>0</td>
            <td colspan="2">0</td>
            <td>12</td>
            <td>13</td>
            <td colspan="2">12</td>
          </tr>
          <tr>
            <th>超空</th>
            <td>11</td>
            <td>1</td>
            <td colspan="2">23</td>
            <td>34</td>
            <td>11</td>
            <td colspan="2">111</td>
          </tr>
        </table>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import TreeEchart from "./components/TreeEChart.vue";
import {getOrgChartList} from "@/api/modules/org";
export default {
  components: {
    TreeEchart,
  },
  data() {
    return {
      flag: false,
      btnFlag: false,
      detailInfo: false,
      showTable: false,
      chartData: {},
    };
  },
  created() {
    this.loadData();
  },
  computed:{
    spliceName(){
      return (data) => {
        let name=''
        if (data.substring(0,6)=='济南市公安局'&&data.length>6)
        {
          name = data.substring(6)
        }else {
          name = data
        }
        return name
      }
    },

  },
  methods: {
    loadData() {
      getOrgChartList().then((response) => {
        const mapTree = (org) => {
          const haveChildren =
            Array.isArray(org.children) && org.children.length > 0;
          let colorType = "blue"
          if (org.orgType === "0") {
            colorType = '#409EFF' // 内设
          }else if (org.orgType === "1"){
            colorType = '#5CBB7A' // 下设
          }else if (org.orgType === "2"){
            colorType = '#E6A23C' // 派出
          }else if (org.orgType === "3"){
            colorType = '#F56C6C' // 事业
          }
          return {
            name: org.simpleName ? org.simpleName : org.orgName,
            id: org.id,
            children: haveChildren ? org.children.map((i) => mapTree(i)) : [],
            itemStyle: {color: colorType}
          };
        };
        this.chartData = mapTree(response.data[0]);
      });
    },
    updateFlag(val) {
      // this.flag = val;
      this.btnFlag = true;
      this.chartData = val;
      // this.$refs.tree.initChart();
      // document.getElementById("treeChart").style.width = "50%";
      let temp =
        "指挥部,警务保障部,人口管理支队,出入境管理局,历下区分局,历城区分局,槐荫区分局,天桥区分局,长清区分局,姚家派出所,文化东路派出所,东关大街派出所,司里街派出所,燕山派出所,山大路派出所,郭店派出所,彩石派出所,港沟派出所,中大派出所,吴家堡派出所,美里湖派出所,腊山派出所,青年公园派出所,西市场派出所,制锦市派出所,药山派出所,无影山派出所,宝华街派出所,纬北路派出所,桑梓店派出所,北园派出所,新城派出所,城关派出所,潘村派出所,万德派出所,新城派出所,五峰派出所,马山派出所,平安店派出所,归德派出所";
      if (temp.indexOf(val.name) !== -1) {
        this.showTable = true;
      } else {
        this.showTable = false;
      }
      console.log("val", val);
    },
    handleClose() {
      this.flag = false;
    },
    returnIndex() {
      this.showTable = false;
      this.btnFlag = false;
      document.getElementById("treeChart").style.width = "100%";
      this.loadData();
      // this.$refs.tree.initChart();
    },
  },
};
</script>

<style scoped>
#treeChart {
  background-color: #ffffff;
}
/deep/ .el-dialog {
  height: 500px;
}
.contain {
  display: flex;
}
</style>
<style>
/*.sub-top-table th {*/
/*  background-color: #206fb336;*/
/*  border: 1px solid #7aa4c9;*/
/*  color: #fff;*/
/*}*/
/*.sub-top-table td {*/
/*  background-color: #a5c6efc7;*/
/*}*/
</style>
